<template>
	<view>
		<view class="uni-header">
			<!-- <view class="uni-group hide-on-phone">
				<view class="uni-title">{{ $t('demo.table.title') }}</view>
			</view> -->
			<view class="uni-group">
				<!-- 输入框 -->
				<input class="uni-search" type="text" v-model="searchVal" @confirm="search"
					:placeholder="$t('common.placeholder.query')" />
				<!-- 搜索按钮 -->
				<button class="uni-button" type="default" size="mini"
					@click="search">{{ $t('common.button.search') }}</button>
			</view>
		</view>
		<view class="uni-container">
			<!-- 表格组件 -->
			<uni-table :loading="loading" border stripe type="selection" :emptyText="$t('common.empty')"
				@selection-change="selectionChange">
				<uni-tr>
					<!-- 表头列 -->
					<uni-th width="100" align="center">编号</uni-th>
					<uni-th align="center">位置</uni-th>
					<uni-th align="center">问题描述</uni-th>
					<uni-th align="center">分配问题备注</uni-th>
					<uni-th width="120" align="center">问题状态</uni-th>
					<uni-th width="120" align="center">问题处理状态</uni-th>
					<uni-th align="center">驳回理由</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="item.id">
					<!-- 表格数据列 -->
					<uni-td>{{ item.id }}</uni-td>
					<uni-td>
						<view class="name">{{ item.place }}</view>
					</uni-td>
					<uni-td>
						<view class="name">{{ item.content }}</view>
					</uni-td>
					<uni-td>
						<view class="name">
							{{ item.remark }}
						</view>
					</uni-td>
					<uni-td>
						<view class="status"><uni-tag :text="formatStatus(item.status)"
								:type="getTagType(item.status)"></uni-tag></view>
					</uni-td>
					<uni-td>
						<view class="status"><uni-tag :text="formatDealStatus(item.dutyStatus)"
								:type="getDealTagType(item.dutyStatus)"></uni-tag></view>
					</uni-td>
					<uni-td>
						<view v-if="item.dutyStatus === 2" class="reason">
							<text>{{ item.rejectReason }}</text>
						</view>
					</uni-td>
					<uni-td>
						<view class="uni-group">
							<!-- 处理问题 -->
							<button v-if="canHandleProblem(item) && item.status !== 'COMPLETE'" class="uni-button"
								size="mini" type="primary" @tap="handleProblem(item)">
								{{ $t('common.button.deal') }}
							</button>

							<!-- 查看详情 -->
							<button v-if="isSafety && item.status !== 'COMPLETE'" class="uni-button" size="mini"
								type="primary" @tap="reviewProblem(item)">
								{{ $t('common.button.review') }}
							</button>

							<!-- 审批 -->
							<button v-if="isSafety && item.status !== 'COMPLETE'" class="uni-button" size="mini"
								type="primary" @tap="approveProblem(item)">
								{{ $t('common.button.approve') }}
							</button>

							<!-- 驳回 -->
							<button v-if="isSafety && item.status !== 'COMPLETE'" class="uni-button" size="mini"
								type="warn" @tap="rejectProblemItem(item)">
								{{ $t('common.button.reject') }}
							</button>

							<!-- 分配问题 -->
							<button v-if="isSafety && item.status !== 'COMPLETE'" class="uni-button" size="mini"
								type="primary" @tap="allotProblem(item)">
								{{ $t('common.button.allot') }}
							</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<view class="uni-pagination-box">
				<!-- 分页组件 -->
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" @change="change" />
			</view>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	// import { downloadFileAndRename } from '@/utils'
	// 导出默认模块
	export default {
		// 数据属性
		data() {
			return {
				officeId: 0,
				userType: '',
				// 搜索值
				searchVal: '',
				// 表格数据
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				// 加载状态
				loading: false,
				selectedIndexs: []
			}
		},
		computed: {
			isSafety() {
				return this.userType === 'SAFETY'
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map((i) => this.tableData[i])
			},
			selectedIds() {
				return this.selectedItems.map((_) => _.id)
			}
		},
		onLoad() {
			const loginRes = uni.getStorageSync('loginRes')
			this.userType = loginRes.userType || ''
		},
		onShow() {
			// 获取第一页数据
			this.getData(1)
			this.getQuestionPendingNum()
		},
		// 方法
		methods: {
			...mapMutations('app', ['SET_REMINDER_NUM']),
			async getQuestionPendingNum(id) {
				const params = {}

				try {
					const res = await uni.$uu.Api.getQuestionPendingNum(params)
					console.log(res)
					if (res.code === 100) {
						this.SET_REMINDER_NUM(res.content)
					}
				} catch (e) {
					console.log(e)
				}
			},
			canHandleProblem({
				dutyOfficeId
			}) {
				const loginRes = uni.getStorageSync('loginRes')
				this.officeId = loginRes.officeId || 0
				return this.officeId > 0 && dutyOfficeId === this.officeId
			},
			getDealTagType(status = 0) {
				const tagMap = {
					0: 'default',
					1: 'success',
					2: 'error'
				}
				return tagMap[status]
			},
			getTagType(status = 'WAIT') {
				const tagMap = {
					WAIT: 'default',
					COMPLETE: 'success',
					RECEIVED: 'warning'
				}
				return tagMap[status]
			},
			formatDealStatus(status = 0) {
				const statusMap = {
					0: '未处理',
					1: '已处理',
					2: '已驳回' //处理中
				}
				return statusMap[status]
			},
			formatStatus(status = 'WAIT') {
				const statusMap = {
					WAIT: '待处理',
					COMPLETE: '已办结',
					RECEIVED: '已分配'
				}
				return statusMap[status]
			},
			allotProblem({
				id
			}) {
				const url = `/pages/problem/allot/index?id=${id}`
				uni.navigateTo({
					url
				})
			},
			approveProblem({
				id
			}) {
				uni.showModal({
					title: '审核问题',
					content: '确定要审核当前项吗?',
					success: (res) => {
						if (res.confirm) {
							this.completeQuestion(id)
						}
					}
				})
			},
			async completeQuestion(id) {
				const params = {
					questionId: id
				}

				try {
					const res = await uni.$uu.Api.completeQuestion(params)
					console.log(res)
					if (res.code === 100) {
						const title = '审核成功'
						uni.showToast({
							title,
							success: () => {
								this.getData(1)
							}
						})
					}
				} catch (e) {
					console.log(e)
				}
			},
			rejectProblemItem({
				id
			}) {
				uni.showModal({
					title: '驳回问题',
					editable: true,
					placeholderText: '请输入要驳回的理由',
					success: (res) => {
						if (res.confirm) {
							this.rejectQuestion(id, res.content) //editable 为 true 时，用户输入的文本
						}
					}
				})
			},
			async rejectQuestion(id, content = '') {
				const params = {
					questionId: id
				}

				if (content !== '') {
					params['rejectReason'] = content
				}

				try {
					const res = await uni.$uu.Api.rejectQuestion(params)
					console.log(res)
					if (res.code === 100) {
						const title = '驳回成功'
						uni.showToast({
							title,
							success: () => {
								this.getData(1)
							}
						})
					}
				} catch (e) {
					console.log(e)
				}
			},
			reviewProblem({
				id
			}) {
				const url = `/pages/problem/detail/index?id=${id}`
				uni.navigateTo({
					url
				})
			},
			handleProblem({
				id
			}) {
				const url = `/pages/problem/detail/index?id=${id}`
				uni.navigateTo({
					url
				})
			},
			// 多选事件处理函数
			selectionChange(e) {
				console.log('selectionChange:', e)
				this.selectedIndexs = e.detail.index
			},
			// 批量删除函数
			delTable() {
				this.selectedItems()
			},
			// 分页触发事件处理函数
			change(e) {
				console.log('pagination change: ', e)
				this.selectedIndexs = []
				this.getData(e.current)
			},
			// 搜索函数
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据函数
			async getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent

				const params = {
					curPage: this.pageCurrent,
					numPerPage: this.pageSize,
					keyword: value
				}

				try {
					const res = await uni.$uu.Api.getListQuestion(params)
					console.log(res)
					if (res.code === 100) {
						this.tableData = [...res.content.recordList]
						this.loading = false
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 伪request请求函数
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options

				let total = tableData.length

				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})

				if (value) {
					data = []
					tableData.forEach((item) => {
						if (item.risk_name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	/* #endif */
</style>